<template>
	<view :class="nowTheme()">
		<common-top>
			<template #name>注册</template>
		</common-top>
		<view class="register-input-box">
			<text class="login" @click="goLogin()">登入</text>
			<view class="box">
				
				<view class="input-box">
					<view class="input-title">phone</view>
					<view class="register-input">
						<view class="register-input-icon">
							<text class="iconfont icon-dianhua"></text>
						</view>
						<input class="register-input-context" v-model="registerDTO.phone" focus placeholder="请输入电话" />
					</view>
				</view>
				
				
				<view class="input-box">
					<view class="input-title">name</view>
					<view class="register-input">
						<view class="register-input-icon">
							<text class="iconfont icon-yonghuming"></text>
						</view>
						<input class="register-input-context" v-model="registerDTO.userName" focus placeholder="请输入用户名" />
					</view>
				</view>
				
				<view class="input-box">
					<view class="input-title">password</view>
					<view class="register-input">
						<view class="register-input-icon">
							<text class="iconfont icon-password"></text>
						</view>
						<input class="register-input-context" v-model="registerDTO.password" password focus placeholder="请输入密码" />
					</view>
				</view>
				
			</view>
			
			<button class="register-button" @click="register()">注册</button>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import {registerAPI} from '/services/user.js'
	import { nowTheme } from '@/utils/theme.js'
	const registerDTO = reactive({
		phone:'',
		userName:'',
		password:''
	})
	const goLogin=()=>{
		uni.navigateTo({
			url:'/pages/login/login'
		})
	}
	const register = async() =>{
		const res = await registerAPI(registerDTO)
		if(res.code==200){
			uni.showToast({ icon: 'success', title: '注册成功' })
			setTimeout(()=>{
				uni.navigateTo({url:'/pages/login/login'})
			},500)
		}
	}
</script>

<style scoped lang="scss">
	.register-input-box{
		display: flex;
		flex-direction: column;
		.login{
			color: skyblue;
			display: flex;
			justify-content: flex-end; //右对齐
			margin-bottom: 10rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
		.box{
			display: flex; // 使用 flex 布局
			flex-direction: column; // 垂直排列
			align-items: center; // 水平居中
			.input-box{
				width: 80vw;
				margin-top: 20rpx;
				.input-title{
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.register-input{
					display: flex;
					height: 80rpx;
					border-radius: 10rpx;
					background-color: #eaeaea;
					align-items: center;
					.register-input-icon{
						margin-left: 10rpx;
					}
					.register-input-context{
						padding: 10rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
		.register-button{
			margin-top: 90rpx;
			width: 600rpx;
			border-radius: 45rpx;
			color: white;
			background-color: #ffca28;
		}
	}   
</style>
